import  {PureComponent} from 'react';
import {
  Card,
  Select,
  TreeSelect,
  Switch,
  Input,
  message,
  Modal,
  Radio,
  Space,
  Checkbox,
  Spin,
  Drawer
} from 'antd';
import React from 'react';
import { Map, InfoWindow, MouseTool } from 'react-amap';
import apiToken from "../../../config/apiToken";
import code from '@/pages/Map/code.js';
import {createFromIconfontCN, CloseOutlined} from "@ant-design/icons";
import style from './style.less';
const { Option } = Select;
const { Search } = Input;
const IconFont = createFromIconfontCN({ scriptUrl: apiToken.scriptUrl });

class UIMarker extends React.Component {
  constructor(props) {
    super(props);
    this.loadUI();
  }

  loadUI() {
    window.AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker) => {
      this.initPage(SimpleMarker);
    })
  }

  initPage(SimpleMarker) {
    const map = this.props.__map__;
    new SimpleMarker({
      //前景文字
      iconLabel: 'A',
      //图标主题
      iconTheme: 'default',
      //背景图标样式
      iconStyle: 'pink',
      //...其他Marker选项...，不包括content
      map: map,
      position: [120, 31]
    });

    //创建SimpleMarker实例
    new SimpleMarker({
      //前景文字
      iconLabel: {
        innerHTML: '<i>B</i>', //设置文字内容
        style: {
          color: '#fff' //设置文字颜色
        }
      },
      //图标主题
      iconTheme: 'fresh',
      //背景图标样式
      iconStyle: 'green',
      //...其他Marker选项...，不包括content
      map: map,
      position: [120, 29]
    });

    new SimpleMarker({
      //前景文字
      iconLabel: {
        innerHTML: '<b>中心</b>', //设置文字内容
        style: {
          color: '#fff' //设置文字颜色
        }
      },
      iconTheme: 'fresh',
      iconStyle: 'purple',
      map: map,
      position: [113.256762, 23.118145]
    });
  }

  render() {
    return null;
  }
}

class GMap extends PureComponent{

  constructor(props) {
    super(props);
    this.state={
      position: {
        longitude: 113,
        latitude: 23
      },
      flag: false,
      divVisible: true,
      poiList: [],
      poiValue: '',
      station: '',
      stationInfo: [],
      modalVisible: false,
      busLines: [],
      cityCode: '',
      lineInfo: [],
      lineVisible: false,
      lineList: [],
      self: null,
      loading: false,
      DrawerVisible: false,
      routeStart: {},
      routePanel: false,
      layers: []
    }
    const self =this;
    this.toolEvents = {
      created: (tool) => {
        self.tool = tool;
        //console.log(tool)
      },
      draw({obj}) {
        self.drawWhat(obj);
      }
    }
    //this.loadInfoUI();
  }

  componentDidMount() {
    //地图加载前设置安全密钥
    window._AMapSecurityConfig = {
      securityJsCode: apiToken.securityJsCode,
    }
  }

  loadInfoUI(){
    //设置DomLibrary，jQuery或者Zepto
    //window.AMapUI.setDomLibrary($);

    //加载PoiPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
    window.AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
      let poiPicker = new PoiPicker({
        input: 'pickerInput' //输入框id
      });
      //监听poi选中信息
      poiPicker.on('poiPicked', function(poiResult) {
        console.log(poiResult);
      });
    });
  }

  loadTrafficLayer(){
    //实时路况图层
    let trafficLayer = new AMap.TileLayer.Traffic({
      zIndex: 10
    });
    this.map.add(trafficLayer)
  }

  loadSatelliteLayer(){
    //卫星图层
    let satelliteLayer = new AMap.TileLayer.Satellite({
      zIndex: 10
    });
    this.map.add(satelliteLayer)
  }

  loadRoadNetLayer(){
    //路网图层
    let roadNetLayer = new AMap.TileLayer.RoadNet({
      zIndex: 10
    });
    this.map.add(roadNetLayer)
  }

  loadBuildingsLayer(){
    //建筑楼块 3D 图层
    let buildingsLayer = new AMap.Buildings({
      heightFactor: 1,
      wallColor: [255, 0, 0, 1],
      roofColor: 'rgba(0,0,255,0.5)'
    });
    this.map.add(buildingsLayer)
  }

  drawWhat(obj) {
    let text = '';
    switch(obj.CLASS_NAME) {
      case 'AMap.Marker':
        text = `你绘制了一个标记，坐标位置是 {${obj.getPosition()}}`;
        break;
      case 'AMap.Polygon':
        text = `你绘制了一个多边形，有${obj.getPath().length}个端点`;
        break;
      case 'AMap.Circle':
        text = `你绘制了一个圆形，圆心位置为{${obj.getCenter()}}`;
        break;
      default:
        text = '';
    }
    this.setState({
      what: text
    });
  }

  drawCircle(){
    if(this.tool){
      this.tool.circle();
      this.setState({
        what: '准备绘制圆形',
        divVisible: false
      });
    }
  }

  drawRectangle(){
    if(this.tool){
      this.tool.rectangle();
      this.setState({
        what: '准备绘制多边形（矩形）',
        divVisible: false
      });
    }
  }

  drawMarker(){
    if (this.tool){
      this.tool.marker();
      this.setState({
        what: '准备绘制坐标点',
        divVisible: false
      });
    }
  }

  drawPolygon() {
    if (this.tool) {
      this.tool.polygon();
      this.setState({
        what: '准备绘制多边形',
        divVisible: false
      });
    }
  }

  close(){
    if (this.tool){
      this.tool.close();
    }
    this.setState({
      what: '关闭了鼠标工具',
      divVisible: true
    });
  }

  loadUI(value) {
    //加载DistrictExplorer，loadUI的路径参数为模块名中 'ui/' 之后的部分
    window.AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => {
      this.initPage(DistrictExplorer, value);
    })
  }

  onTreeChange = value => {
    this.loadUI(value)
  };

  initPage(DistrictExplorer, adcode) {
    let map = this.map;
    //创建一个实例
    let districtExplorer = new DistrictExplorer({
      map: map //关联的地图实例
    });

    districtExplorer.loadAreaNode(adcode, (error, areaNode) => {
      if (error) {
        console.error(error);
        return;
      }
      //清除绘制的所有面
      map.remove(map.getAllOverlays('polygon'));
      //绘制载入的区划节点
      this.renderAreaNode(districtExplorer, areaNode);
    });
  }

  renderAreaNode(districtExplorer, areaNode) {
    let map = this.map;
    //清除已有的绘制内容
    //districtExplorer.clearFeaturePolygons();

    //just some colors
    let colors = ["#7AC1FF", "#FE8198", "#FCE497", "#9BF09E", "#FF5D00", "#7386D3", "#F259A6", "#0CCBE8", "#FFC996", "#B2D7F9", "#F1D300"];

    //绘制子级区划
    districtExplorer.renderSubFeatures(areaNode, (feature, i) => {

      let fillColor = colors[i % colors.length];
      let strokeColor = colors[colors.length - 1 - i % colors.length];

      return {
        cursor: 'default',
        bubble: true,
        strokeColor: strokeColor, //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 1, //线宽
        fillColor: fillColor, //填充色
        fillOpacity: 0.35, //填充透明度
      };
    });

    //绘制父级区划，仅用黑色描边
    districtExplorer.renderParentFeature(areaNode, {
      cursor: 'default',
      bubble: true,
      strokeColor: 'black', //线颜色
      fillColor: null,
      strokeWeight: 3, //线宽
    });

    //更新地图视野以适合区划面
    map.setFitView(districtExplorer.getAllFeaturePolygons());
  }

  chgLayer = value => {
    switch (value) {
      case 'trafficLayer': this.loadTrafficLayer()
        break;
      case 'satellite': this.loadSatelliteLayer()
        break;
      case 'roadNetLayer': this.loadRoadNetLayer()
        break;
      case 'buildingsLayer': this.loadBuildingsLayer()
        break;
      default :
        break;
    }
  }

  onSearch = value => {
    window.AMap.plugin(['AMap.PlaceSearch'], () => {

      let placeSearch = new AMap.PlaceSearch({
        city: '全国',
        pageIndex: 1, //页码，默认值为1
        pageSize: 100, //单页显示结果条数，默认值为20，最大值为50
      });

      placeSearch.search(value, (status, result) => {
        if (status == 'complete'){
          this.setState({ poiList: result.poiList.pois });
        }else {
          this.setState({ poiList: [] });
        }
      })
    })
  }

  handleChange = value => {
    this.setState({ poiValue: value });
  }

  searchDetail = id => {
    let location;
    window.AMap.plugin('AMap.PlaceSearch', () => {
      let placeSearch = new AMap.PlaceSearch();
      placeSearch.getDetails(id, (status, result) => {
        if (status == 'complete'){
          location = result.poiList.pois[0].location;
          let poi = result.poiList.pois[0];
          this.setState({
            position: {
              longitude: location.lng,
              latitude: location.lat
            }
          })

          let content = [
            `<div style="text-align: center; color: #ff3c00; font-size: 18px; border-bottom: 1px dashed lightgray ">${poi.name}</div>`,
            `<div>类型：<b style="color: #4400ff">${poi.type}</b></div>`,
            `<div>地址：<b style="color: #2eabff">${poi.address}</b></div>`,
            `<div>电话：<i style="color: limegreen">${poi.tel ? poi.tel : '无'}</i></div>`
          ]

          // 创建 infoWindow 实例
          let infoWindow = new AMap.InfoWindow({
            anchor: 'bottom-center',
            content: content.join('<br/>')
          });
          this.map.setZoom(12);
          // 打开信息窗体
          infoWindow.open(this.map, [location.lng, location.lat]);
        }
      })
    })
  }

  searchStation = value => {
    this.map.clearMap();
    AMap.plugin(["AMap.StationSearch"], () => {
      //实例化公交站点查询类
      let station = new AMap.StationSearch({
        pageIndex: 1, //页码，默认值为1
        pageSize: 100, //单页显示结果条数，默认值为20，最大值为50
        city: '全国' //限定查询城市，可以是城市名（中文/中文全拼）、城市编码，默认值为『全国』
      });

      //执行关键字查询
      station.search(value, (status, result) => {
        //打印状态信息status和结果信息result
        //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误。
        if (status == 'complete'){
          let stationInfo = result.stationInfo;
          this.setState({
            stationInfo: stationInfo,
            cityCode: stationInfo[0].citycode
          });
          let markers = [];
          if (stationInfo.length > 0){
            stationInfo.map((item) => {
              let marker = new AMap.Marker({
                offset:new AMap.Pixel(-16,-32),
                position: item.location,
                map: this.map,
                title: item.name,
                item: item
              });
              marker.info = new AMap.InfoWindow({
                content: item.name,
                offset: new AMap.Pixel(0, -30)
              });
              marker.on('mouseover', (e) => {
                e.target.info.open(this.map, e.target.getPosition());
              })
              marker.on('click', (e) => {
                let busLines = e.target.De.item.buslines;
                this.setState({
                  modalVisible: true,
                  busLines: busLines
                })
              })
              markers.push(marker);
            })
            this.map.setFitView();
          }
        }else {
          message.warning("无结果!");
        }
      });
    });
  }

  handleStationChg = value => {
    this.setState({ station: value });
  }

  searchBusLine = busLineName => {
    const { cityCode } = this.state;
    /*公交线路查询*/
    if(!busLineName) return;
    AMap.plugin(["AMap.LineSearch"], () => {
      let linesearch = new AMap.LineSearch({
        pageIndex: 1,
        city: cityCode,
        pageSize: 20,
        extensions: 'all'
      });
      //搜索“536”相关公交线路
      linesearch.search(busLineName, (status, result) => {
        //this.map.clearMap()
        if (status === 'complete' && result.info === 'OK') {
          this.setState({
            lineInfo: result.lineInfo,
            lineVisible: true
          })
        } else {
          if (status == 'no_data'){
            message.warning('暂无路线');
          }else {
            message.error('查询失败!');
          }
        }
      });
    })
  }

  /*公交路线查询服务返回数据解析概况*/
  lineSearch_Callback = (data) => {
    let lineNum = data.length;
    if(lineNum > 0) {
      data.map((item) => {
        let pathArr = item.path;
        let stops = item.via_stops;
        let startPot = stops[0].location;
        let endPot = stops[stops.length - 1].location;
        this.drawbusLine(startPot, endPot, pathArr);
      })
    }
  }

  /*绘制路线*/
  drawbusLine = (startPot, endPot, BusArr) => {
    //清除所有marker
    this.map.remove(this.map.getAllOverlays('marker'));
    let busPolyline;
    //绘制起点，终点
    new AMap.Marker({
      map: this.map,
      position: startPot, //起点位置
      icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
      zIndex: 10,
      anchor: 'bottom-center',
    });
    new AMap.Marker({
      map: this.map,
      position: endPot, //终点位置
      icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
      zIndex: 10,
      anchor: 'bottom-center',
    });
    //绘制乘车的路线
    busPolyline = new AMap.Polyline({
      map: this.map,
      path: BusArr,
      strokeColor: "#00ffb7",//线颜色
      strokeOpacity: 1,//线透明度
      isOutline:true,
      outlineColor:'white',
      strokeWeight: 6//线宽
    });
    // 将 busPolyline 显示在地图中心并自动缩放地图到合适级别。
    // true表示需要动画过程，[60,200,60,60]表示上下左右避让像素
    this.map.setFitView(busPolyline, true, [60,200,60,60]);

  }

  hanldModalVisible = (visible, flag) => {
    if (flag){
      const { bus } = this.state;
      if (bus){
        this.searchBusLine(bus);
      }else {
        message.warn('未选择公交！');
        return ;
      }
    }else this.setState({ busLines: [] });
    this.setState({ modalVisible: visible });
  }

  hanldLineVisible = (visible, flag) => {
    if (flag){
      const { lineList } = this.state;
      if (lineList.length > 0){
        this.lineSearch_Callback(lineList);
      }else {
        message.warn('未选择路线！');
        return ;
      }
    }else this.setState({ lineInfo: [] });
    this.setState({ lineVisible: visible });
  }

  onBusChg = value => {
    let busName = value.target.value.substring(0, value.target.value.lastIndexOf('('));
    this.setState({ bus: busName });
  }

  onLineChg = value => {
    this.setState({
      lineList: value
    })
  }

  showIndoor = id => {
    let indoorMap = new AMap.IndoorMap({
      zIndex: 1000, // 设置室内图层叠加顺序
      opacity: 1, // 设置室内图层透明度
    });
    let map = new AMap.Map('GMap', {
      showIndoorMap: false, //隐藏地图默认的室内地图图层
      layers: [indoorMap, AMap.createDefaultLayer()] // 添加室内等图层
    });
    indoorMap.showIndoorMap('B0FFFAB6J2'); // 显示指定 POI 室内信息
  }

  getWeather = city => {
    //加载天气查询插件
    window.AMap.plugin('AMap.Weather', function() {
      //创建天气查询实例
      var weather = new AMap.Weather();

      //执行实时天气信息查询
      weather.getLive(city, function(err, data) {
        console.log(err, data);
      });
    });
  }

  driving = (self, lng, lat) => {
    AMap.plugin('AMap.Driving', () => {
      let driving = new AMap.Driving({
        map: this.map,
        panel: "panel",
        policy: AMap.DrivingPolicy.LEAST_TIME
      })
      this.routeing = driving;
      driving.search(new AMap.LngLat(self.lng, self.lat), new AMap.LngLat(lng, lat), (status, result) => {
        this.setState({loading: false});
      })
    })
  }

  walking = (self, lng, lat) => {
    //步行导航
    AMap.plugin('AMap.Walking', () => {
      let walking = new AMap.Walking({
        map: this.map,
        panel: "panel"
      })
      this.routeing = walking;
      //根据起终点坐标规划步行路线
      walking.search(new AMap.LngLat(self.lng, self.lat), new AMap.LngLat(lng, lat), (status, result) => {
        // 未出错时，result即是对应的路线规划方案
        this.setState({loading: false});
      })
    })
  }

  riding = (self, lng, lat) => {
    //骑行导航
    AMap.plugin('AMap.Riding', () => {
      let riding = new AMap.Riding({
        map: this.map,
        panel: "panel"
      })
      this.routeing = riding;
      //根据起终点坐标规划步行路线
      riding.search(new AMap.LngLat(self.lng, self.lat), new AMap.LngLat(lng, lat), (status, result) => {
        this.setState({loading: false});
      })
    })
  }

  transfer = (self, lng, lat) => {
    //公交导航
    //构造公交换乘类
    AMap.plugin('AMap.Transfer', () => {
      let transOptions = {
        map: this.map,
        city: '广州市',
        panel: 'panel',
        policy: AMap.TransferPolicy.LEAST_TIME
      };
      let transfer = new AMap.Transfer(transOptions);
      this.routeing = transfer;
      //根据起、终点坐标查询公交换乘路线
      transfer.search(new AMap.LngLat(self.lng, self.lat), new AMap.LngLat(lng, lat), (status, result) => {
        this.setState({loading: false});
        if (status === 'complete') {
          message.success('绘制公交路线完成')
        } else {
          message.error('公交路线数据查询失败' + result)
        }
      });
    })
  }

  getRoute = (type, lng, lat) => {
    this.setState({loading: true});
    window.AMap.plugin('AMap.Geolocation', () => {
      let geolocation = new AMap.Geolocation({
        // 是否使用高精度定位，默认：true
        enableHighAccuracy: true,
        // 设置定位超时时间，默认：无穷大
        timeout: 5000,
        // 定位按钮的停靠位置的偏移量
        offset: [10, 20],
        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        zoomToAccuracy: true,
        //  定位按钮的排放位置,  RB表示右下
        position: 'RB'
      })
      geolocation.getCurrentPosition((status, result) => {
        let self;
        if(status == 'complete'){
          self = result.position;
        }else{
          // 定位出错
          console.log(result);
          self = {
            lng: 113,
            lat: 23
          };
          message.error('定位失败！使用默认定位...');
        }
        switch (type) {
          case 'AMap.Driving': this.driving(self, lng, lat);
            break;
          case 'AMap.Walking': this.walking(self, lng, lat);
            break;
          case 'AMap.Riding': this.riding(self, lng, lat);
            break;
          case 'AMap.Transfer': this.transfer(self, lng, lat);
            break;
          default: this.setState({loading: false});
            break;
        }
      });
    })
  }

  showDrawer = () => {
    this.setState({
      DrawerVisible: true,
    });
  };

  onDrawerClose = () => {
    this.setState({
      DrawerVisible: false,
    });
  };

  routeModelChg = e => {
    const { routeStart } = this.state;
    this.setState({ routePanel: false });
    this.getRoute(e.target.value, routeStart.longitude, routeStart.latitude);
  }

  componentWillUnmount(){
    this.map.destroy();
  }

  render() {

    const { position, flag, what, divVisible, poiList, poiValue,
      modalVisible, busLines, lineVisible, lineInfo, loading, routePanel, routeStart } = this.state;

    const plugins = [
      //'MapType',
      'Scale',
      'OverView',
      'ControlBar',
      {
        name: 'ToolBar',
        options: {
          visible: true,
          onCreated(ins){
            //console.log(ins);
          }
        }
      }
    ]

    const events = {
      created: (ins) => {
        this.map = ins;
        let contextMenuPositon;
        this.setState({ layers: ins.getLayers()})

        //地图中添加鼠标工具MouseTool插件
        //this.mouseTool = new AMap.MouseTool(this.map);

        AMap.plugin(["AMap.MouseTool"], () => {
          this.mouseTool = new AMap.MouseTool(this.map);
        });

        //创建右键菜单
        let contextMenu = new AMap.ContextMenu();

        //右键放大
        contextMenu.addItem("放大一级", () => {
          this.map.zoomIn();
        }, 0);

        //右键缩小
        contextMenu.addItem("缩小一级", () => {
          this.map.zoomOut();
        }, 1);

        //右键显示全国范围
        contextMenu.addItem("缩放至全国范围", (e) => {
          this.map.setZoomAndCenter(4, [108.946609, 34.262324]);
        }, 2);

        //右键添加Marker标记
        contextMenu.addItem("添加标记", (e) => {
          let marker = new AMap.Marker({
            map: this.map,
            position: contextMenuPositon //基点位置
          });
        }, 3);

        contextMenu.addItem("距离测量", (e) => {
          this.mouseTool.rule();
          contextMenu.close();
        }, 4);

        contextMenu.addItem("导航去这里", (e) => {
          this.setState({
            routePanel: true,
            routeStart: {
              longitude: contextMenuPositon.lng,
              latitude: contextMenuPositon.lat
            },
            position: {
              longitude: contextMenuPositon.lng,
              latitude: contextMenuPositon.lat
            }
          });
        }, 5);

        contextMenu.addItem("关闭导航", (e) => {
          this.map.remove(this.map.getAllOverlays('polyline'));
          this.map.remove(this.map.getAllOverlays('marker'));
          if (this.routeing){
            this.routeing.clear();
          }else {
            message.warning('导航未开启！');
          }
        }, 6);

        //地图绑定鼠标右击事件——弹出右键菜单
        this.map.on('rightclick', (e) => {
          contextMenu.open(this.map, e.lnglat);
          contextMenuPositon = e.lnglat;
        });
      },
      click: (e) => {
        this.setState({ flag: false }, () => {
          this.setState({
            position: {
              longitude: e.lnglat.lng,
              latitude: e.lnglat.lat
            },
            flag: true
          })
        })
      }
    }

    const layerStyle = {
      padding: '10px',
      background: '#fff',
      border: '1px solid #ddd',
      borderRadius: '4px',
      position: 'absolute',
      top: '10px',
      left: '10px'
    };

    const options = poiList && poiList.length > 0 ? poiList.map(d => <Option key={d.id}>{d.name}</Option>) : [];

    return (
      <Card
        title={
          <div>
            <p style={{ whiteSpace: 'nowrap', fontSize: '15px' }}>
              <span>
            公交查询：&nbsp;&nbsp;
                    <Search
                      placeholder="请输入站点"
                      style={{ width: '150px'}}
                      onSearch={this.searchStation}
                      onChange={this.handleStationChg}
                      notFoundContent={null}
                    />
            </span>&nbsp;&nbsp;
              <span>
                地址查询：&nbsp;&nbsp;
                <Select
                  showSearch
                  placeholder="请输入名称"
                  style={{ width: '150px'}}
                  value={poiValue && poiValue}
                  defaultActiveFirstOption={false}
                  showArrow={false}
                  filterOption={false}
                  onSearch={this.onSearch}
                  onChange={this.handleChange}
                  onSelect={this.searchDetail}
                  notFoundContent={null}
                >
          {options}
        </Select>
              </span>&nbsp;&nbsp;
              <span>
              切换图层:&nbsp;&nbsp;
                <Select
                  style={{ width: '10%' }}
                  onChange={this.chgLayer}
                >
                <Option value='trafficLayer'>实时路况</Option>
                <Option value='satellite'>卫星</Option>
                <Option value='roadNetLayer'>路网</Option>
                <Option value='buildingsLayer'>建筑3D</Option>
              </Select>
            </span>&nbsp;&nbsp;
              <span>
              城市:&nbsp;&nbsp;
                <TreeSelect
                  showSearch
                  style={{ width: '15%' }}
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                  treeData={code.codeList}
                  placeholder='请选择'
                  onChange={(e) => this.onTreeChange(e)}
                  treeNodeFilterProp='label'
                />
              </span>&nbsp;&nbsp;
              <span>
                鼠标绘制工具：&nbsp;
                <a onClick={() => this.drawCircle()}>圆形</a>&nbsp;&nbsp;
                <a onClick={() => this.drawRectangle()}>矩形</a>&nbsp;&nbsp;
                <a onClick={() => this.drawMarker()}>坐标点</a>&nbsp;&nbsp;
                <a onClick={() => this.drawPolygon()}>多边形</a>&nbsp;&nbsp;
                <a onClick={() => this.close()}>关闭</a>
              </span>
            </p>
          </div>
        }
      >
        <Spin spinning={loading} tip='加载中'>
          <div id='GMap' style={{width: '100%', height: (document.body.clientHeight-225 + 'px')}}>
            <Map
              viewMode='3D'
              pitch='50'
              amapkey={apiToken.mapKey}
              plugins={plugins}
              events={events}
              useAMapUI={true}
              zoom={position && 6}
              center={[position && position.longitude, position && position.latitude]}
            >
              {/*<UIMarker/>*/}
              <InfoWindow
                position={position}
                visible={flag}
                isCustom={false}
              >
                <h3 style={{textAlign: 'center', color: 'orangered'}}>坐标</h3>
                <h4>{position && position.latitude} ° , {position && position.longitude} °</h4>
              </InfoWindow>
              <InfoWindow
                position={routeStart}
                visible={routePanel}
                isCustom={false}
                size={{
                  width: '325',
                  height: '120'
                }}
              >
                <h3 style={{textAlign: 'center', color: '#00ffae'}}>请选择出行模式</h3><br/>
                <Radio.Group onChange={this.routeModelChg}>
                  <Radio.Button value="AMap.Driving">驾车</Radio.Button>
                  <Radio.Button value="AMap.Transfer">公交</Radio.Button>
                  <Radio.Button value="AMap.Riding">骑行</Radio.Button>
                  <Radio.Button value="AMap.Walking">步行</Radio.Button>
                  <Radio.Button value="AMap.TruckDriving">货车</Radio.Button>
                </Radio.Group>
              </InfoWindow>
              <MouseTool events={this.toolEvents}/>
            </Map>
            <div id="panel" className={style.panel}></div>
          </div>
        </Spin>
        <div hidden={divVisible} style={layerStyle}>{what}</div>
        {modalVisible &&
          <Modal
            title="请选择公交"
            visible={modalVisible}
            onOk={() => this.hanldModalVisible(false, true)}
            onCancel={() => this.hanldModalVisible(false, false)}
          >
            <Radio.Group onChange={this.onBusChg}>
              {busLines.map((item) =>
                <Space direction="vertical">
                  <Radio value={item.name}>{item.name}</Radio>
                </Space>
              )}
            </Radio.Group>
          </Modal>
        }
        {lineVisible &&
        <Modal
          title="请选择路线"
          visible={lineVisible}
          onOk={() => this.hanldLineVisible(false, true)}
          onCancel={() => this.hanldLineVisible(false, false)}
        >
          <Checkbox.Group onChange={this.onLineChg}>
            {lineInfo.map((item) =>
              <Space direction="vertical">
                <Checkbox value={item}>{item.name}</Checkbox>
              </Space>
            )}
          </Checkbox.Group>
        </Modal>
        }
      </Card>
    )
  }
}

export default GMap;
